/**
  * Trigger
  *
  * @author jh3y
*/

$color: #fff;
$dormant: transparentize($color, 0.5);

$height: 20px;
$margin: 5px;
$no-of-bars: 5;
$width: 10px;


$y: $height + (2 * $margin);

$x1: (2 * $width) + (2 * $margin);
$x2: $width + $margin;

@keyframes trigger {
  0%, 100% {
    box-shadow: (-($x1)) $y 0 0 $dormant,
      (-($x2)) $y 0 0 $dormant,
      0 $y 0 0 $dormant,
      $x2 $y 0 0 $dormant,
      $x1 $y 0 0 $dormant;
  }
  30% {
    box-shadow: (-($x1)) $y 0 5px $color,
      (-($x2)) $y 0 0 $dormant,
      0 $y 0 0 $dormant,
      $x2 $y 0 0 $dormant,
      $x1 $y 0 0 $dormant;
  }
  40% {
    box-shadow: (-($x1)) $y 0 0 $dormant,
      (-($x2)) $y 0 5px $color,
      0 $y 0 0 $dormant,
      $x2 $y 0 0 $dormant,
      $x1 $y 0 0 $dormant;
  }
  50% {
    box-shadow: (-($x1)) $y 0 0 $dormant,
      (-($x2)) $y 0 0 $dormant,
      0 $y 0 5px $color,
      $x2 $y 0 0 $dormant,
      $x1 $y 0 0 $dormant;
  }
  60% {
    box-shadow: (-($x1)) $y 0 0 $dormant,
      (-($x2)) $y 0 0 $dormant,
      0 $y 0 0 $dormant,
      $x2 $y 0 5px $color,
      $x1 $y 0 0 $dormant;
  }
  70% {
    box-shadow: (-($x1)) $y 0 0 $dormant,
      (-($x2)) $y 0 0 $dormant,
      0 $y 0 0 $dormant,
      $x2 $y 0 0 $dormant,
      $x1 $y 0 5px $color;
  }
  80% {
    box-shadow: (-($x1)) $y 0 0 $dormant,
      (-($x2)) $y 0 0 $dormant,
      0 $y 0 0 $dormant,
      $x2 $y 0 0 $dormant,
      $x1 $y 0 0 $dormant;
  }
}

.trigger:before {
  animation: trigger 1s infinite ease;
  content: '';
  height: $height;
  left: 50%;
  margin-left: -($width / 2);
  margin-top: -((1.5 * $height) + (2 * $margin));
  position: absolute;
  top: 50%;
  width: $width;
}
